
.house{
    position: relative;
    margin: 60px auto; 

    width: 348px;
    height: 476px;
    /* background-color: rgb(241, 216, 216); */
    background-image: url(../img/house.png);
    background-position: left top;

    
}
.house .wenzi{
    position: absolute;
    top: 20px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -150px;    

    width: 300px;
    height: 50px;
    /* background-color: rgb(210, 235, 238); */

}
.house .wenzi h1{
    font-size: 28px;
    color: white;
    text-align: center;
    line-height: 50px;
}
.house .wenzi b{
    color: #ff9700;
}

.login{
    position: absolute;
    top: 220px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -150px;
    width: 300px;
    height:80px;
    /* background-color: rgb(157, 235, 196); */
}
/* 账户栏 */
.zpLogin{
    position: absolute;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(202, 175, 175); */
}
.zpLogin input{
    /* float: left; */
    /* margin-left: 35px; */
    padding-left: 20px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(164, 168, 221); */
    border: 1px solid #ff9700;
    font-size: 14px;
    border-radius: 15px;
}
.zpLogin span{
    position: absolute;
    right: 10px;
}
.zpLogin1{
    position: absolute;
    top: 50px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(202, 175, 175); */
}
.zpLogin1 input{
   
    padding-left: 20px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(164, 168, 221); */
    border: 1px solid #00c3f1;
    font-size: 14px;
    border-radius: 15px;
}
.zpLogin1 span{
    position: absolute;
    right: 10px;
}
/* 记住忘记密码部分 */
.jizhu{
    position: absolute;
    top: 320px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -112px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(206, 179, 179); */
    /* opacity: 0.7; */
}
.jizhu .jizhu1{
    float: left;
}
.jizhu .jizhu1 label{
    font-size: 12px;
    color: #878888;
}

.jizhu .jizhu2 button{
    margin-top: 2px;
    float: right;
    width: 60px;
    height: 24px;
    /* line-height: 30px; */
    border-radius: 7px;
    font-size: 12px;
    color: aliceblue;
    background-color: #00c3f1;
    border: 1px solid #00c3f1;

}
/* 忘记密码 */
.wangji{
    position: absolute;
    top: 370px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -112px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(240, 210, 210); */
}
.wangji .wangji1{
    float: left;
}
.wangji .wangji1 a{
    display: inline-block;
    width: 70px;
    height: 28px;
    border-radius: 15px;
    font-size: 12px;
    color: aliceblue;
    background-color: #00c3f1;
    border: 1px solid #00c3f1;
    text-align: center;
    line-height: 28px;
}
.wangji .wangji2{
    float: right;
}
.wangji .wangji2 a{
    display: inline-block;
    width: 80px;
    height: 28px;
    /* border-radius: 15px; */
    font-size: 10px;
    color: aliceblue;
    background-color: #00c3f1;
    border: 1px solid #00c3f1;
    
}
/* 登录注册界面底下动画区域 */
.slip{
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 100%;
    /* background-color: rgb(180, 143, 143); */
    transition: all 1s;
}
/* 人 */
.slip .left1{
    height: 100px;
    width: 200px;
    /* background-color: rgb(107, 116, 136); */
    float: left;
    
}
.slip .left1 img{
    position: absolute;
    bottom: 0px;
    animation:people 7s infinite;
    
}
@keyframes people{
	0%{
		/* width: 220px;
		height: 220px;
		background-color: #b69db0; */
		transform: translateX(0px)
	}
	55%{
		/* width: 220px;
		height: 220px;
		background-color: #777f6d; */
		/* transform: translateX(250px); */
	}
	80%{
		/* width: 220px;
		height: 220px;
		background-color: #564f47; */
		/* transform: translateX(750px); */
	}
	100%{
		background-color: transparent;
		transform: translateX(300px) ;
	}
}
/* 车 */
.slip .left2{
    height: 100px;
    width: 300px;
    /* background-color: rgb(107, 116, 136); */
    float: left;
}

.slip .left2 img{
    position: absolute;
    bottom: 0px;
    animation:bus 7s infinite;
}
@keyframes bus{
	0%{
		/* width: 220px;
		height: 220px;
		background-color: #b69db0; */
		transform: translateX(0px)
	}
	55%{
		/* width: 220px;
		height: 220px;
		background-color: #777f6d; */
		/* transform: translateX(250px); */
	}
	80%{
		/* width: 220px;
		height: 220px;
		background-color: #564f47; */
		/* transform: translateX(750px); */
	}
	100%{
		background-color: transparent;
		transform: translateX(700px) ;
	}
}
/* 树和房子 */
.slip .right{
    height: 100px;
    width: 300px;
    /* background-color: rgb(107, 116, 136); */
    float: right;
    
}
.slip .right img{
    height: 100%;
}
/* 风筝 */
.kite .kite1{
    position: absolute;
    top: 300px;
    left: 150px;
}
.kite .kite1 img{
    animation:kite11 30s infinite;
}
@keyframes kite11{
	0%{
		/* width: 220px;
		height: 220px;
		background-color: #b69db0; */
        transform: translateX(150px) ;
        transform: translateY(100px) ;
		
	}
	45%{
		transform: translateX(200px)
	}
	
	100%{
		background-color: transparent;
		transform: translateX(100px) ;
        transform: translateY(-300px) ;
	}
}
.kite .kite2{
    position: absolute;
    top: 400px;
    right: 150px;
}
.kite .kite2 img{
    animation:kite22 30s infinite;
}
@keyframes kite22{
	0%{
		/* width: 220px;
		height: 220px;
		background-color: #b69db0; */
        transform: translateX(100px) ;
        transform: translateY(100px) ;
		
	}
	
	45%{
		transform: translateX(100px)
	}
	100%{
		background-color: transparent;
		transform: translateX(50px) ;
        transform: translateY(-300px) ;
	}
}
.kite .kite3{
    position: absolute;
    top: 200px;
    right: 250px;
}
.kite .kite3 img{
    width: 55px;
    animation:kite33 30s infinite;
}
@keyframes kite33{
	0%{
		/* width: 220px;
		height: 220px;
		background-color: #b69db0; */
        transform: translateX(100px) ;
        transform: translateY(100px) ;
		
	}
	
	45%{
		transform: translateX(100px)
	}
	100%{
		background-color: transparent;
		transform: translateX(50px) ;
        transform: translateY(-300px) ;
	}
}



/* 注册页面 */
.zp-register-box{
    position: relative;
    margin: 60px auto; 

    width: 348px;
    height: 476px;
    /* background-color: rgb(241, 216, 216); */
    background-image: url(../img/house.png);
    background-position: left top;
}
.zp-register-box .register-logo{
    position: absolute;
    top: 20px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -150px;    

    width: 300px;
    height: 50px;
    /* background-color: rgb(181, 194, 231); */
}
.zp-register-box .register-logo a{
    font-size: 28px;
    color: white;
    text-align: center;
    line-height: 50px;
}
.zp-register-box .register-logo b{
    color: #ff9700;
}
.zp-register-box-body{
    position: absolute;
    top: 160px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height:220px;
    /* background-color: rgb(157, 235, 196); */
}
.zp-register-box-body .login-box-msg{
    position: absolute;
    top: 0px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -55px;
    width: 120px;
    height:30px;
    /* background-color: rgb(87, 211, 149); */

    font-size: 16px;
    color: #535353;
}

/* 登录名栏 */
.zp-register-box-body .dengluming{
    position: absolute;
    top:30px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(202, 175, 175); */
}
.zp-register-box-body .dengluming input{
    padding-left: 20px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(164, 168, 221); */
    border: 1px solid #ff9700;
    font-size: 12px;
    border-radius: 15px;
}
.zp-register-box-body .dengluming span{
    position: absolute;
    right: 10px;
    top: 4px;
}


/* 邮件栏 */
.zp-register-box-body .youjian{
    position: absolute;
    top:70px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(202, 175, 175); */
}
.zp-register-box-body .youjian input{
    padding-left: 20px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(164, 168, 221); */
    border: 1px solid #00a961;
    font-size: 12px;
    border-radius: 15px;
}
.zp-register-box-body .youjian  span{
    position: absolute;
    right: 10px;
    top: 4px;
}


/* 密码栏 */
.zp-register-box-body .mima{
    position: absolute;
    top:110px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(202, 175, 175); */
}
.zp-register-box-body .mima input{
    padding-left: 20px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(164, 168, 221); */
    border: 1px solid #ff9700;
    font-size: 12px;
    border-radius: 15px;
}
.zp-register-box-body .mima span{
    position: absolute;
    right: 10px;
    top: 4px;
}


/* 确认密码栏 */
.zp-register-box-body .queren{
    position: absolute;
    top:150px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(202, 175, 175); */
}
.zp-register-box-body .queren input{
    padding-left: 20px;
    width: 220px;
    height: 30px;
    /* background-color: rgb(164, 168, 221); */
    border: 1px solid #ff9700;
    font-size: 12px;
    border-radius: 15px;
}
.zp-register-box-body .queren span{
    position: absolute;
    right: 10px;
    top: 4px;
}

/* 我同意协议栏 */
.zp-row{
    position: absolute;
    top: 180px;
    left: 50%;
    /* 把盒子向左侧移动: 自己宽度的一半 */
    margin-left: -110px;
    width: 220px;
    height:40px;
    /* background-color: rgb(157, 235, 196); */
}
.zp-row .zp-row1{
    position: absolute;
    left: 0;
    width: 150px;
    height: 30px;

}
.zp-row .zp-row1 label{
    font-size: 12px;
    color: #535353;
}

.zp-row .zp-row2{
    position: absolute;
    right: 0;
    top: 5px;
    width: 80px;
    height: 30px;
    /* background-color: rgb(235, 166, 166); */
}
.zp-row .zp-row2 button{
    position: absolute;
    top: 3px;
    right: 0;
    width:70px ;
    height: 25px;
    border: 1px solid #00c3f1;
    border-radius: 4px;
    background: #00c3f1;

    color: aliceblue;
    font-size: 12px;
}
.zp-row .zp-row3{
    position: absolute;
    top: 40px;
    left: 0;
    width: 200px;
    height: 30px;
    /* background-color: rgb(231, 189, 189); */
}
.zp-row .zp-row3 a{
    font-size: 12px;
    color: #00c3f1;
}